/**
 * 封装侧边栏
 */

import { FC } from 'react';
import styles from "./index.less";
import cls from "classnames";
import { IArticleLabelList, IBrochure_knowledge_list, IBrochure_knowledge_right_toplist, Ishouping_list } from '@/utils/brochure/beochureType';
import { cycle } from "@/utils/cycle";
import { Link } from 'umi';
/**
 * 用法 ： 使用本组件需在您的页面中引入此组件 然后把需要渲染的数据传给对应的参数，不需要渲染的参数给一个空的数组
 * 即可生成渲染
 */
interface Irecommend {
  // 推荐阅读
  recommend: Partial<IBrochure_knowledge_right_toplist[]>,
  // 文章标签
  articlesLayer: Partial<Ishouping_list[]>,
  // 文章分类
  articleLabel: Partial<IArticleLabelList[]>,
  // 其他知识笔记
  otherKnowledge: Partial<IBrochure_knowledge_list[]>,
}


const ArticleListReadPage: FC<Irecommend> = (props) => {
  // const [show, switchShow] = useState([] as IBrochure_knowledge_right_toplist[]);
  // const mytimes = (arr: any) => {
  //   let ind = 0
  //   const aa = setInterval(() => {
  //     ind++;
  //     switchShow([...show, props.recommend[ind]]);
  //     (props.recommend.length <= ind) && clearInterval(aa)
  //   }, 200)
  // }

  return (
    <>
      {/* 推荐阅读  ---- 可用 */}
      {
        props.recommend.length ? <div className={styles.knowledge_right_top}>
          <h2 className={styles.recommended}>推荐阅读</h2>
          <div className={styles.knowledge_right_top_list}>
            {
              props.recommend && props.recommend.map((item, index) => {
                return <div className={cls(styles.knowledge_right_top_list_item, styles.bounceInTop)} key={item!.id} transition-delay={`${index * 200}s`}>
                  <a href="#">
                    <div className={cls(styles.left_item, styles.slide_right)}>
                      {item!.title}
                    </div>
                    <div className={cls(styles.right_item, styles.slide_right)}>
                      {cycle(item!.createAt)}
                    </div>
                  </a>
                </div>
              })
            }
          </div>
        </div> : null
      }
      {/* 文章标签   ----- 还没搞 */}
      {
        props.articlesLayer.length ? props.articlesLayer.map(item => {
          return <div className={styles.knowledge_right_bottom_article} >
            <h2 className={styles.recommended}>文章标签</h2>
            <div className={styles.knowledge_right_bottom_list}>
              {
                <div className={styles.knowledge_right_bottom_list_item}>

                </div>
              }
            </div>
          </div>
        }) : null
      }
      {/* 文章分类  ---- 可用*/}

      {
        props.articleLabel.length ? <div className={styles.knowledge_right_bottom}>
          <h2 className={styles.recommended}>文章分类</h2>
          <div className={styles.knowledge_right_bottom_list}>
            {
              props.articleLabel.map((item, index) => {
                return index < 6 && <div className={styles.knowledge_right_bottom_list_item} key={item!.id}>
                  <Link to={item!.id}>
                    <span>{item!.label}</span>
                    <span>共计 {item!.articleCount} 篇文章</span>
                  </Link>
                </div>
              })
            }
          </div>
        </div> : null
      }
      {/* 其他知识笔记 --- 可用 */}
      {
        props.otherKnowledge.length ? <div className={styles.otherKnowledge_right_bottom}>
          <div className={styles.otherKnowledge_right_bottom_list}>
            {
              props.otherKnowledge.map((item, index) => {
                return index < 3 && <div className={styles.otherKnowledge_right_bottom_list_item} key={item!.id}>
                  <Link to={`/brochure/brochureDetail/${item!.id}`}>
                    <div className={styles.otherKnowledge_right_bottom_list_item_top}>
                      <h3>{item!.title}</h3>
                      &nbsp;
                      <div className={styles.sg}></div>
                      &nbsp;
                      <span>{cycle(`${item!.createAt}`)}</span>
                    </div>
                    <div className={styles.otherKnowledge_right_bottom_list_item_bottom}>
                      <div className={styles.otherKnowledge_right_bottom_list_item_bottom_left}>
                        <p>{item!.summary}</p>
                        <p>
                          <span>🛹 {item!.views} </span>
                          ·
                          <span>🎈 分享</span>
                        </p>
                      </div>
                      <div className={styles.otherKnowledge_right_bottom_list_item_bottom_right}>
                        <img src={item?.cover} alt="" />
                      </div>
                    </div>
                  </Link>
                </div>
              })
            }
          </div>
        </div> : null
      }
    </>
  );
}


export default ArticleListReadPage;
